﻿<template>
  <div class="address-container">
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="searchAddressParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
      <template #menu-after>
        <el-button>导出</el-button>
      </template>
    </avue-table-search>

    <base-table-card>
      <template #header-left>
        <el-tabs v-model="type" class="demo-tabs" @tab-change="handleTabClick">
          <el-tab-pane label="发货地址" :name="1"></el-tab-pane>
          <el-tab-pane label="归还地址" :name="2"></el-tab-pane>
        </el-tabs>
      </template>
      <template #header-right>
        <el-button type="primary" class="add-btn" @click="handleOpenModal('add')">新增地址</el-button>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadTableSearch"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #provinceName="{ row }">
          <span>{{ `${row.provinceName}-${row.cityName}-${row.areaName}` }}</span>
        </template>
        <template #menu="{ row }">
          <el-button link type="primary" @click="handleOpenModal('edit', row)">编辑</el-button>
          <el-popconfirm title="确定要删除该发货地址吗？" @confirm="handleDel(row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </avue-crud>
    </base-table-card>
    <!-- 新增地址、修改地址 -->
    <address-operate
      :visble="addressVisble"
      :current-info="currentData"
      :modal-type="operateType"
      :area-data="areaData"
      :current-type="type"
      @hide="handleHideModal"
    />
  </div>
</template>

<script setup lang="js">
  import { searchOption, tableOption } from "@/crudOption/address-management/search.js";
  import AddressOperate from "./componets/AddressOperate.vue";

  import { onMounted } from "vue";
  // 弹窗显示隐藏
  const addressVisble = ref(false);
  // 当前数据
  const currentData = ref({});
  // 弹窗类型
  const operateType = ref("");
  // tab类别
  const type = ref(1);
  // 省市区数据
  const areaData = ref([]);

  onMounted(() => {
    loadGetTableData();
    getAreaList();
  });
  // 获取地区数据
  const getAreaList = () => {
    Api.common.getAreaData().then(res => {
      console.warn(res);
      areaData.value = res.data;
    });
  };
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchAddressParams,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getAddressList,
    getParamsFormat: params => {
      console.warn(params, "params");

      const searchParams = {
        ...params,
        type: type.value,
      };
      if (searchParams?.addDate?.length) {
        searchParams.startTime = `${params.addDate[0]} 00:00:00`;
        searchParams.endTime = `${params.addDate[1]} 23:59:59`;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateStartTime = `${params.editDate[0]} 00:00:00`;
        searchParams.updateEndTime = `${params.editDate[1]} 23:59:59`;
      }
      if (searchParams?.areaArr?.length) {
        searchParams.provinceId = searchParams.areaArr[0];
        searchParams.cityId = searchParams.areaArr[1];
        searchParams.areaId = searchParams.areaArr[2];
      }
      delete searchParams.addDate;
      delete searchParams.editDate;
      delete searchParams.areaArr;
      return searchParams;
    },
  });
  // tab切换
  const handleTabClick = () => {
    loadTableSearch();
  };
  // 打开弹窗
  const handleOpenModal = (type, info) => {
    if (type === "add") {
      currentData.value = {};
    } else {
      currentData.value = { ...info };
    }
    operateType.value = type;
    addressVisble.value = true;
  };
  // 关闭弹窗
  const handleHideModal = refresh => {
    currentData.value = {};
    operateType.value = "";
    addressVisble.value = false;
    if (refresh) {
      loadTableSearch();
    }
  };
  // 删除
  const handleDel = id => {
    Api.product.delAddress({ id }).then(() => {
      $msg.success("删除成功");
      loadGetTableData();
    });
  };
</script>

<style lang="scss" scoped>
  .address-container {
    padding: 16px;
  }
</style>
